// import React, { useEffect, useState, useRef } from 'react';
// import DropArea from '../DropArea/index';
// let Canhb=()=>{
//    const [scale, setScale] = useState(1); // 初始缩放比例为1
//   const canvasRef = useRef(null);
//   const ctx = useRef(null);

//   // 初始化Canvas
//   useEffect(() => {
//     if (canvasRef.current) {
//       ctx.current = canvasRef.current.getContext('2d');
//       // 初始化绘制逻辑（这里可以省略，或者添加你的绘制代码）
//     }
//   }, []);

//   // 处理滑动条变化
//   const handleScaleChange = (e) => {
//     // 假设滑动条的值范围是0.5到2，对应50%到200%的缩放
//     const newValue = parseFloat(e.target.value);
//     setScale(newValue);
//   };

//   // 设置Canvas的样式，包括缩放和缩放原点
//   const canvasStyle = {
//     transform: `scale(${scale})`,
//     transformOrigin: 'center', // 缩放原点设置为画布中心
//     border: '1px solid black', // 可选，为Canvas添加边框以便于观察
//     /*
//      * 如果需要Canvas居中显示，并且不受缩放影响地保持在其父容器中居中，
//      * 你可能还需要为Canvas的父容器设置样式，如display: flex, justify-content: center, align-items: center
//      * 但在这个例子中，我们仅关注Canvas本身的缩放。
//      */
//   };

//   const [images, setImages] = useState([]);

//   const handleDrop = (e) => {
//     e.preventDefault();
//     const data = JSON.parse(e.dataTransfer.getData('application/reactflow'));
//     const img = new Image();
//     img.onload = () => {
//       const ctx = canvasRef.current.getContext('2d');
//       // 假设我们简单地将图片绘制到左上角，你可以根据需求调整位置和大小
//       ctx.drawImage(img, 0, 0, img.width, img.height);
//     };
//     img.src = data.src; // 假设拖放的数据中包含src属性

//     // 如果需要记录已放置的图片，可以更新状态
//     setImages(prevImages => [...prevImages, { src: data.src }]);
//   };

//   const [droppedImages, setDroppedImages] = useState([]);
//   const handleDrop1 = (newDroppedImages) => {
//     setDroppedImages(newDroppedImages);
//   };

//   return (
//     <div className='canbox'>
//       {/* <DropArea id='canvas' onDrop={handleDrop1} /> */}
//                    <div
//       onDragOver={(e) => e.preventDefault()}
//       onDrop={handleDrop}
//       className="drop-area"
//     >
//      <canvas  ref={canvasRef}  style={canvasStyle} ></canvas>
//     </div>

//       <input
//         className='progress'
//         type="range"
//         min="0.1"
//         max="5"
//         step="0.1"
//         value={scale}
//             onChange={handleScaleChange}
//       />
//         </div>
// )
// }

// export default Canhb
import React, { useState } from 'react';  
  import './index.css'
const ZoomableDiv = () => {  
  // 缩放比例的状态，初始值为 1（原始大小）  
  const [scale, setScale] = useState(1);  
  
  // 处理进度条变化的事件  
  const handleScaleChange = (e) => {  
    // 将进度条的值（通常是 0 到 100）转换为缩放比例（例如，0.5 到 2）  
    // 这里我们简单地将范围从 1 到 2 映射到进度条的 0% 到 100%  
    const newValue = e.target.value / 10 + 1; // 假设我们想要的范围是 0.5 到 2  
    setScale(newValue);  
  };  
  
  return (  
    <div className='divbox'>  
      {/* 可缩放的 div 盒子 */}  
      <div  
        style={{  
          width: '200px', // 初始宽度  
          height: '300px', // 初始高度  
          backgroundColor: 'skyblue', // 背景颜色，仅为了可视化  
          margin: '20px',  
          transition: 'transform 0.2s ease', // 平滑过渡效果  
          transform: `scale(${scale})` // 应用缩放  
        }}  
      >  
        {/* 这里可以放置内容，比如文本或子组件 */}  
        Zoomable  
      </div>  
  
      {/* 进度条来控制缩放 */}  
      <input  
        className='inputt'
        type="range"  
        min="0"  
        max="100"  
        value={Math.floor((scale - 1) * 10)} // 将缩放比例转换回进度条的值  
        onChange={handleScaleChange}  
        style={{ marginTop: '10px' }}  
      />  
    </div>  
  );  
};  
  
export default ZoomableDiv; 